<template>
  <div class="department-container">
    <el-card class="department-card">
      <template #header>
        <div class="card-header">
          <span>部门管理</span>
          <el-button type="primary" @click="handleAdd">新增部门</el-button>
        </div>
      </template>

      <!-- 搜索和筛选区域 -->
      <div class="search-filter-container">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="部门名称">
            <el-input style="width: 200px;" v-model="searchForm.deptName" placeholder="请输入部门名称" clearable />
          </el-form-item>
          <el-form-item label="部门编码">
            <el-input style="width: 200px;"  v-model="searchForm.deptCode" placeholder="请输入部门编码" clearable />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 120px;">
              <el-option label="启用" :value="1" />
              <el-option label="禁用" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 部门列表表格 -->
      <div class="table-container">
        <el-table v-loading="loading" :data="departmentList" style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="deptName" label="部门名称" width="180" />
          <el-table-column prop="deptCode" label="部门编码" width="150" />
          <el-table-column prop="parentName" label="上级部门" width="150" />
          <el-table-column prop="managerName" label="部门负责人" width="120" />
          <el-table-column prop="costCenter" label="成本中心编码" width="150" />
          <el-table-column prop="budgetAmount" label="年度预算总额" width="150" :formatter="formatCurrency" />
          <el-table-column prop="status" label="状态" width="100" :formatter="formatStatus">
            <template #default="scope">
              <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
                {{ scope.row.status === 1 ? '启用' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180" />
          <el-table-column label="操作" fixed="right">
            <template #default="scope">
              <el-button type="primary" size="small" @click="handleEdit(scope.row)">
                编辑
              </el-button>
              <el-button size="small" @click="handleView(scope.row)">
                查看
              </el-button>
              <el-button type="danger" size="small" @click="confirmDelete(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页组件 -->
      <div class="pagination-container">
        <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
          :page-sizes="[2, 10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>

    <!-- 查看部门详情对话框 -->
    <el-dialog v-model="viewDialogVisible" title="部门详情" width="50%" :close-on-click-modal="false">
      <el-form :model="viewForm" label-width="120px">
        <el-form-item label="部门名称">
          <el-input v-model="viewForm.deptName" disabled />
        </el-form-item>
        <el-form-item label="部门编码">
          <el-input v-model="viewForm.deptCode" disabled />
        </el-form-item>
        <el-form-item label="上级部门">
          <el-input v-model="viewForm.parentName" disabled />
        </el-form-item>
        <el-form-item label="部门负责人">
          <el-input v-model="viewForm.managerName" disabled />
        </el-form-item>
        <el-form-item label="成本中心编码">
          <el-input v-model="viewForm.costCenter" disabled />
        </el-form-item>
        <el-form-item label="年度预算总额">
          <el-input v-model="viewForm.budgetAmount" disabled />
        </el-form-item>
        <el-form-item label="状态">
          <el-input :value="viewForm.status === 1 ? '启用' : '禁用'" disabled />
        </el-form-item>
        <el-form-item label="排序号">
          <el-input v-model="viewForm.sortOrder" disabled />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="viewForm.createTime" disabled />
        </el-form-item>
        <el-form-item label="更新时间">
          <el-input v-model="viewForm.updateTime" disabled />
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 新增部门对话框 -->
    <el-dialog v-model="addDialogVisible" title="新增部门" width="50%" :close-on-click-modal="false">
      <el-form :model="addForm" label-width="120px">
        <el-form-item label="部门名称" required>
          <el-input v-model="addForm.deptName" placeholder="请输入部门名称" />
        </el-form-item>
        <el-form-item label="部门编码" required>
          <el-input v-model="addForm.deptCode" placeholder="请输入部门编码" />
        </el-form-item>
        <el-form-item label="上级部门">
          <el-select v-model="addForm.parentId" placeholder="请选择上级部门" style="width: 100%;">
            <el-option label="无" :value="null" />
            <el-option v-for="dept in departmentList" :key="dept.id" :label="dept.deptName" :value="dept.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门负责人">
          <el-input v-model="addForm.managerId" placeholder="请输入部门负责人ID" />
        </el-form-item>
        <el-form-item label="成本中心编码">
          <el-input v-model="addForm.costCenter" placeholder="请输入成本中心编码" />
        </el-form-item>
        <el-form-item label="年度预算总额">
          <el-input v-model.number="addForm.budgetAmount" placeholder="请输入年度预算总额" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="addForm.status" placeholder="请选择状态">
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序号">
          <el-input v-model.number="addForm.sortOrder" placeholder="请输入排序号" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveAdd" :loading="addLoading">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑部门对话框 -->
    <el-dialog v-model="editDialogVisible" title="编辑部门" width="50%" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="120px">
        <el-form-item label="部门名称">
          <el-input v-model="editForm.deptName" placeholder="请输入部门名称" />
        </el-form-item>
        <el-form-item label="部门编码" disabled>
          <el-input v-model="editForm.deptCode" />
        </el-form-item>
        <el-form-item label="成本中心编码">
          <el-input v-model="editForm.costCenter" placeholder="请输入成本中心编码" />
        </el-form-item>
        <el-form-item label="年度预算总额">
          <el-input v-model.number="editForm.budgetAmount" placeholder="请输入年度预算总额" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="editForm.status" placeholder="请选择状态">
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序号">
          <el-input v-model.number="editForm.sortOrder" placeholder="请输入排序号" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEdit" :loading="editLoading">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useDepartment } from '../hooks/useDepartment'

// 使用部门管理hook
const {
  loading,
  searchForm,
  departmentList,
  pagination,
  viewDialogVisible,
  viewForm,
  editDialogVisible,
  editForm,
  editLoading,
  addDialogVisible,
  addForm,
  addLoading,
  formatCurrency,
  formatStatus,
  loadDepartments,
  handleSearch,
  resetSearch,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  handleEdit,
  handleDelete,
  handleView,
  saveEdit,
  handleAdd,
  saveAdd
} = useDepartment()

// 生命周期
onMounted(() => {
  loadDepartments()
})

// 确认删除
const confirmDelete = (row) => {
  ElMessageBox.confirm(
    `确定要删除部门「${row.deptName}」吗？删除后将无法恢复。`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    handleDelete(row.id)
  }).catch(() => {
    // 用户取消删除
  })
}
</script>

<style scoped>
.department-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 120px);
}

.department-card {
  margin-bottom: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-filter-container {
  margin-bottom: 20px;
}

.search-form {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
}

.table-container {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>